{% extends 'base.html' %}

{% block title %}基于心情推荐 - 电影推荐系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row mb-4">
        <div class="col-md-8 mx-auto text-center">
            <h1 class="display-5 mb-4">根据心情关键词推荐电影</h1>
            <p class="lead">描述你当前的心情或想要的观影体验，AI将为你推荐最合适的电影</p>
        </div>
    </div>
    
    <div class="row mb-5">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-body">
                    <form id="moodForm">
                        <div class="mb-3">
                            <label for="moodDescription" class="form-label">你的心情或期望</label>
                            <textarea class="form-control" id="moodDescription" rows="3" placeholder="例如：想看一部轻松幽默的电影放松心情 或 需要一部催人泪下的电影释放情绪..." required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">获取推荐</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-10 mx-auto">
            <div id="moodRecommendationsContainer" style="display: none;">
                <h2 class="mb-4">为你推荐的电影</h2>
                <div id="loadingIndicator" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-2">AI正在为你寻找最适合的电影...</p>
                </div>
                <div id="recommendationsResults" class="row"></div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">常见心情推荐</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-2">
                            <button class="btn btn-outline-secondary w-100 mood-suggestion">心情低落，需要振奋</button>
                        </div>
                        <div class="col-md-4 mb-2">
                            <button class="btn btn-outline-secondary w-100 mood-suggestion">想看一部浪漫爱情片</button>
                        </div>
                        <div class="col-md-4 mb-2">
                            <button class="btn btn-outline-secondary w-100 mood-suggestion">需要刺激和冒险</button>
                        </div>
                        <div class="col-md-4 mb-2">
                            <button class="btn btn-outline-secondary w-100 mood-suggestion">想要思考人生意义</button>
                        </div>
                        <div class="col-md-4 mb-2">
                            <button class="btn btn-outline-secondary w-100 mood-suggestion">适合家庭一起观看</button>
                        </div>
                        <div class="col-md-4 mb-2">
                            <button class="btn btn-outline-secondary w-100 mood-suggestion">想看经典老电影</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const moodForm = document.getElementById('moodForm');
    const moodDescription = document.getElementById('moodDescription');
    const moodSuggestions = document.querySelectorAll('.mood-suggestion');
    const recommendationsContainer = document.getElementById('moodRecommendationsContainer');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const recommendationsResults = document.getElementById('recommendationsResults');
    
    // 点击心情建议按钮
    moodSuggestions.forEach(button => {
        button.addEventListener('click', function() {
            moodDescription.value = this.textContent;
            moodForm.dispatchEvent(new Event('submit'));
        });
    });
    
    // 提交表单获取推荐
    moodForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const mood = moodDescription.value.trim();
        if (!mood) return;
        
        // 显示推荐容器和加载指示器
        recommendationsContainer.style.display = 'block';
        loadingIndicator.style.display = 'block';
        recommendationsResults.innerHTML = '';
        
        try {
            const response = await fetch(`/movies/api/ai-mood-recommendations/?mood=${encodeURIComponent(mood)}`);
            
            if (!response.ok) {
                throw new Error('API响应不正常');
            }
            
            const data = await response.json();
            
            // 隐藏加载指示器
            loadingIndicator.style.display = 'none';
            
            // 显示推荐结果
            if (!data.recommendations || data.recommendations.length === 0) {
                recommendationsResults.innerHTML = `
                    <div class="col-12">
                        <div class="alert alert-info">
                            没有找到符合你心情的电影推荐。请尝试描述其他心情或场景。
                        </div>
                    </div>
                `;
                return;
            }
            
            // 构建推荐电影卡片
            let recommendationsHTML = '';
            
            data.recommendations.forEach(movie => {
                recommendationsHTML += `
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">${movie.title} (${movie.year})</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <h6 class="text-muted mb-2">推荐理由：</h6>
                                    <p>${movie.reason}</p>
                                </div>
                                <div class="d-grid">
                                    <a href="/movies/?query=${encodeURIComponent(movie.title)}" class="btn btn-outline-primary">查找此电影</a>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            recommendationsResults.innerHTML = recommendationsHTML;
            
        } catch (error) {
            console.error('获取推荐出错:', error);
            loadingIndicator.style.display = 'none';
            recommendationsResults.innerHTML = `
                <div class="col-12">
                    <div class="alert alert-danger">
                        <p>抱歉，获取推荐时出现错误。</p>
                        <button class="btn btn-outline-primary mt-2" onclick="window.location.reload()">重试</button>
                    </div>
                </div>
            `;
        }
    });
});
</script>
{% endblock %} 